<template>
  <div class="dialog_vip_warp" style="color: #8b8c91">
    <div class="vip_left_info_box">
      <div class="vip_left_info">
        <div v-if="version == 'VIP'" class="vip_info">
          <div class="vip_info_title">
            <img src="@/assets/fastposter/vip/pay/vip.png" class="img">
            <span class="title">专业版</span>
          </div>
          <!-- <div class="vip_tq_info">电脑/手机 会员通用</div> -->
          <div class="has_box">
            <ul class="right_list">
              <li class="item"><i class="iconfont icon-chenggong1" />更多筛选维度</li>
              <li class="item"><i class="iconfont icon-chenggong1" />更多的查询次数:200/日</li>
              <li class="item"><i class="iconfont icon-chenggong1" />支持导出</li>
              <li class="item"><i class="iconfont icon-chenggong1" />更多的Ai次数:200/日</li>
              <li class="item"><i class="iconfont icon-chenggong1" />详情页的数据均可看</li>
            </ul>
          </div>
        </div>
        <div v-else-if="version == 'SVIP'" class="vip_info">
          <div class="vip_info_title">
            <img src="@/assets/fastposter/vip/pay/svip.png" class="img">
            <span class="title">旗舰版</span>
          </div>
          <!-- <div class="vip_tq_info">电脑/手机 会员通用</div> -->
          <div class="has_box">
            <ul class="right_list">
              <li class="item"><i class="iconfont icon-chenggong1" />更多筛选维度</li>
              <li class="item"><i class="iconfont icon-chenggong1" />更多的查询次数:200/日</li>
              <li class="item"><i class="iconfont icon-chenggong1" />支持导出</li>
              <li class="item"><i class="iconfont icon-chenggong1" />更多的Ai次数:200/日</li>
              <li class="item"><i class="iconfont icon-chenggong1" />详情页的数据均可看</li>
            </ul>
          </div>
        </div>
        <div v-else-if="version == 'EVIP'" class="vip_info">
          <div class="vip_info_title">
            <img src="@/assets/fastposter/vip/pay/evip.png" class="img">
            <span class="title">企业版</span>
          </div>
          <div class="has_box">
            <ul class="right_list">
              <li class="item"><i class="iconfont icon-chenggong1" />18个子账号</li>
              <li class="item"><i class="iconfont icon-chenggong1" />全部筛选维度</li>
              <li class="item"><i class="iconfont icon-chenggong1" />超多的查询次数:200/日</li>
              <li class="item"><i class="iconfont icon-chenggong1" />支持全部导出</li>
              <li class="item"><i class="iconfont icon-chenggong1" />超多的Ai次数:200/日</li>
              <li class="item"><i class="iconfont icon-chenggong1" />详情页的数据均可看</li>
            </ul>
          </div>
        </div>

        <div class="bottom_txt">
          <div class="to_pay" @click="toPay">
            更多会员特权
            <i class="iconfont icon-next" />
          </div>
          <p class="no_back">购买后不支持7天无理由退款</p>
        </div>
      </div>
    </div>
    <div class="vip_right">
      <el-row :gutter="24" type="flex" justify="center" class="tabs_vip"
        :class="isDetail || isDome || isHideTab ? 'tabs_vip2' : ''" style="margin-left: -8px; margin-right: -8px">
        <el-col class="vip_card_p" :span="8" style="margin-left: -4px; position: relative"
          :style="version == 'EVIP' ? 'z-index:5' : ''">
          <!-- ↓↓↓ 这里选中的话需要加上css类名 vip_super_select ↓↓↓ -->
          <div class="vip_card ui_click fe_cursor vip_card_bg" :class="{ vip_pro_select: version == 'EVIP' }"
            @click="vipClick('EVIP')">
            <div class="vip_card_div">
              <div class="vip_card_div_left">
                <img class="vip_card_icon" src="@/assets/fastposter/vip/pay/evip.png">
                <p>企业版</p>
              </div>
            </div>
            <span class="des">公司型适合多人联合使用</span>
          </div>
        </el-col>
        <el-col class="vip_card_p" :span="8" style="position: relative" :style="version == 'SVIP' ? 'z-index:5' : ''"
          :class="{ vip_pro_hide: statevip === 'EVIP' && (isDetail || isDome || isHideTab) }">
          <!-- 旗舰版 -->
          <!-- ↓↓↓ 这里选中的话需要加上css类名 vip_super_select ↓↓↓ -->
          <div id="specialty" class="vip_card ui_click fe_cursor" :class="{ vip_pro_select: version == 'SVIP' }"
            @click="vipClick('SVIP')">
            <div class="vip_card_div">
              <div class="vip_card_div_left">
                <img class="vip_card_icon" src="@/assets/fastposter/vip/pay/svip.png">
                <p>旗舰版</p>
              </div>
            </div>
            <span class="des">适用于高级资深SEO操盘手</span>
          </div>
        </el-col>

        <el-col class="vip_card_p" :span="8" style="margin-right: -4px; position: relative"
          :style="version == 'VIP' ? 'z-index:5' : ''"
          :class="{ vip_pro_hide: (statevip === 'EVIP' || statevip === 'SVIP') && (isDetail || isDome || isHideTab) }">
          <!-- ↓↓↓ 这里选中的话需要加上css类名 vip_super_select ↓↓↓ -->
          <div class="vip_card ui_click fe_cursor" :class="{ vip_pro_select: version == 'VIP' }"
            @click="vipClick('VIP')">
            <div class="vip_card_div">
              <div class="vip_card_div_left">
                <img class="vip_card_icon" src="@/assets/fastposter/vip/pay/vip.png">
                <p>专业版</p>
              </div>
            </div>
            <span class="des">适用于抖音博主、SEOer</span>
          </div>
        </el-col>
        <el-col :span="8" class="tabs_vip_left" />
        <el-col :span="8" class="tabs_vip_right" />
      </el-row>
      <div class="vip_bottom">
        <el-row :gutter="20" class="vip_select_warp" :style="showNewYear ? 'height:135px' : ''">
          <div ref="vipbox" class="vip_box"
            :class="selectCombo.length == 6 ? 'vip_box6' : selectCombo.length == 5 ? 'vip_box5' : selectCombo.length == 4 ? 'vip_box4' : ''">
            <el-col v-for="(item, index) of selectCombo" :key="'objItem' + index"
              :style="`${selectCombo.length > 4 && 'flex-shrink:0;'} display:${item.month > 0 || item.has_cycle ? 'block' : 'none'}`"
              class="vip_select_item">
              <div class="vip_select ui_click fe_cursor" style="float: left" :class="{
          vip_selected: item.month === selectMonth.month,
        }" @click="changeMonth(item)">
                <div class="vip_box_top">
                  <div class="vip_select_time">
                    <span>{{ item.month }}个月</span>
                  </div>
                  <div class="vip_right">
                    <p class="vip_select_price_one">
                      ¥
                      <strong v-if="item.month > 0" v-text="item.activity_price && startTime <= item.activity_end_time && startTime >= item.activity_start_time
                            ? parseInt(item.activity_price / item.month)
                            : parseInt(item.price / item.month)">
                        
                      </strong>
                      <span v-if="item.month > 0">/月</span>
                    </p>
                    <!-- 原价 划线价格-->
                    <!-- txt_line -->
                    <template v-if="item.month > 0">
                      <p class="vip_select_price"
                        :class="item.activity_price && startTime <= item.activity_end_time && startTime >= item.activity_start_time ? 'txt_line' : ''">
                        ¥{{ item.price }}
                      </p>
                    </template>
                  </div>
                </div>
                <!-- 会员选择月份图标 -->
                <div v-if="item.month === selectMonth.month" class="vip_selected_icon_box">
                  <p class="vip_selected_icon"><i class="iconfont icon-check" /></p>
                </div>
              </div>
            </el-col>
          </div>
        </el-row>

        <div class="sub_quantity" v-if="version == 'EVIP'">
          <div class="sub_title">团队成员总数</div>
          <div class="sub_quantity_list">
            <div class="item" v-for="( item, index ) in subQuantityMapPrice" :key="index"
              :class="subQuantityNumber == index ? 'on' : ''" @click="changeSubQuantity(index)">{{ index }}人</div>
          </div>
        </div>

        <div v-if="!$store.state.isChildAccount" class="dialog_vip_pay" style="margin-top: 10px"
          :style="hasActivity ? 'margin-top:21px' : ''">
          <div class="dialog_vip_pay_top">
            <div class="dialog_vip_pay_top_left">
              <el-tooltip class="item" effect="light" placement="bottom">
                <div slot="content">
                  <div class="qrcode_bg qrcode_bg2">
                    <div class="qrcode_line qrcode_none" />
                    <img :src="$store.state.serveImg2" alt="" class="qrcode_img">
                  </div>
                  <p style="text-align: center; margin-top: 10px; margin-bottom: 15px">如需帮助或对公付款，请扫码联系客服</p>
                </div>
                <span class="fe_cursor flex_c" style="display: inline-flex"><img class="weixin"
                    src="@/assets/fastposter/vip/payBox/weixin.png"> 客服微信</span>
              </el-tooltip>
              <!-- 用户购买信息 -->
              <div class="dialog_vip_user_info">
                <div class="comment_box swiper-container totop_list">
                  <ul v-if="payUserList.length" class="swiper-wrapper">
                    <li v-for="(item, index) in payUserList" :key="index" class="swiper-slide">
                      <div class="right_infos">
                        <p class="TextE1 name-box">用户{{ item.member.mobile || '--' }}刚刚购买了会员</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div v-loading="orderInfoLoading" class="dialog_vip_pay_info">
              <p v-if="orderInfo && orderInfo.deduction" class="price_tip">
                <span>会员折扣：当前版本升级会员可折扣{{ orderInfo && orderInfo.deduction }}元</span>
                <span>(仅支持抵扣一次，不支持分批、存款、找零)</span>
              </p>
              <p class="price_txt">应付金额</p>
              <p class="price">¥{{ orderInfo.pay_amount }}</p>
              <p v-if="orderInfo.total_amount > orderInfo.pay_amount" class="original_price">原价¥{{
          orderInfo.total_amount }}元
              </p>
              <p class="price_time">有效期至：{{ vipEndTime }}</p>
              <div class="price_btn flex_c_c" @click="goToPay">去购买</div>
            </div>

            <div class="card_exchange_btn" @click="openMemberCardExchange()">会员卡兑换</div>

          </div>
          <div v-if="!$store.state.isChildAccount" class="dialog_vip_pay_bottom">
            <p v-if="!isDetailPage" :style="isDetail ? 'opacity:1' : 'opacity:0;cursor: default;'" class="lookNosample"
              @click="lookNosample(false)">
              查看示例数据<i style="font-size: 20px" class="iconfont icon-chevron-right" />
            </p>
            <p v-else :style="isDetail ? 'opacity:1' : 'opacity:0'" class="lookNosample" @click="lookNosample(true)">
              查看页面示例<i style="font-size: 20px" class="iconfont icon-chevron-right" />
            </p>
          </div>
        </div>
        <div v-else class="childTipsBox">
          <div class="dialog_vip_pay_top">
            <div class="dialog_vip_pay_top_left">
              <el-tooltip class="item" effect="light" placement="bottom">
                <div slot="content">
                  <div class="qrcode_bg qrcode_bg2">
                    <div class="qrcode_line qrcode_none" />
                    <img :src="$store.state.serveImg2" alt="" class="qrcode_img">
                  </div>
                  <p style="text-align: center; margin-top: 10px; margin-bottom: 15px">如需帮助或对公付款，请扫码联系客服</p>
                </div>
                <span class="fe_cursor flex_c" style="display: inline-flex"><img class="weixin"
                    src="@/assets/fastposter/vip/payBox/weixin.png"> 客服微信</span>
              </el-tooltip>
            </div>
          </div>
          <div class="childTips">
            <span>您当前为子账号，享有主账号同等权限，不可购买或续费，解绑账号后可购买。</span>
            <p v-if="isDetail && !isDetailPage"
              style="float: right; margin-top: 20px; color: #face15; cursor: pointer; clear: both"
              @click="lookNosample(false)">
              查看示例数据<i style="font-size: 20px" class="iconfont icon-chevron-right" />
            </p>
            <p v-if="isDetail && isDetailPage"
              style="float: right; margin-top: 20px; color: #face15; cursor: pointer; clear: both"
              @click="lookNosample(true)">
              查看页面示例<i style="font-size: 20px" class="iconfont icon-chevron-right" />
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 会员卡兑换 -->
    <MemberCardExchange :show="showMemberCardExchange" :modal="false" :top="'36vh'"
      @close="closeMemberCardExchangeDialog" />

  </div>
</template>
<script>
import Swiper from 'swiper'
// import { reqUserPackagePayBuyList, getPlayUserInfo, postExampleData, reqUserPackageBuy } from '@/api/api'
import http from '../../../api/fastposter'
import { formatDate } from '@/utils/date'
import MemberCardExchange from '../vip/memberCardExchange.vue'
import { mapActions, mapGetters, mapState } from "vuex";
import editor from '../../../store/modules/fastposter/editor';

export default {
  props: {
    isDetail: {
      type: Boolean,
      default: false
    },
    isHideTab: {
      type: Boolean,
      default: false
    }
  },
  components: {
    MemberCardExchange
  },
  data() {
    return {
      combo: [], // vip svip 所有的套餐
      selectCombo: [], // 当前需要的套餐
      version: '',
      selectMonth: {
        price: 0,
        monthPrice: 0,
        reducePrice: 0
      },
      startTime: Math.floor(new Date().getTime() / 1000),
      orderInfo: {},
      memberShip: {},
      resultTime: '',
      codeLoading: false,
      countDate: 60 * 15, // 15 分钟
      countDateFormatter: '00:15:00',
      showDateFormatter: true,
      coupontxt: 0,
      options: [],
      firstOption: [],
      isSelect: false,
      inputText: '',
      inputPrice: '',
      couponId: '',
      isShowUl: false,
      sortTime: 0,
      showTime: false,
      canUse: false, // 首月优惠活动
      discountObj: {
        VIP: false,
        CVIP: false,
        SVIP: false,
        EVIP: false,
        GVIP: false
      },
      showzhekou: true, // 是否显示折扣价
      reqResult: true,
      payUserList: [],
      hasActivity: false, // 是否有活动需要增加高度
      showNewYear: false,
      statevip: '',
      isDetailPage: false,
      vipEndTime: '',
      orderInfoLoading: false,

      subQuantityMapPrice: [],    // 团队成员对应的价格
      subQuantityNumber: 6,   // 团队成员总数

      showMemberCardExchange: false,      // 显示会员卡兑换弹窗
    }
  },
  computed: {
    isDome() {
      return this.$store.state.isDome
    },
    ...mapState({
      'userInfo': state => state.editor.user,
      'editor': state => state.editor,
    }),
    ...mapGetters({
      'grade': 'editor/grade',
      'gradeName': 'editor/gradeName'
    }),
  },
  watch: {
    version(val) {
      this.selectCombo = this.combo[val]
      // if (this.selectCombo.length) {
      //   this.hasActivity = false
      // }
      this.orderInfo = {}
      this.changeMonth(this.selectCombo[0])
    }
  },
  mounted() {
    this.getVipCombo()
    this.reqUserPackagePayBuyList()

    document.addEventListener('visibilitychange', this.windowsBlur)
    // 是否显示的vip
    this.$nextTick(() => {
      this.statevip = this.$store.state.vip
      this.setDetail()
    })
    // this.userSetting()
  },
  destroyed() {
    document.removeEventListener('visibilitychange', this.windowsBlur)
  },
  methods: {
    ...mapActions({
      'getPayList': 'editor/getPayList'
    }),
    toPay() {
      this.$router.push('/pay')
      this.$store.state.dialogPay = false
      this.$emit('closeDialog', true)
    },
    vipClick(vip) {
      const grade = this.grade
      console.log(grade)
      if (grade === 'EVIP' && vip === 'SVIP') {
        return this.$message.error('您是企业版会员，不可购买旗舰版！')
      } else if (grade === 'EVIP' && vip === 'VIP') {
        return this.$message.error('您是企业版会员，不可购买专业版！')
      } else if (grade === 'SVIP' && vip === 'VIP') {
        return this.$message.error('您是旗舰版会员，不可购买专业版！')
      }
      this.version = vip
    },

    // 选择月份
    changeMonth(item) {
      this.selectMonth = item
      // 计算会员到期时间
      const endTime = (this.userInfo.end_time || new Date().getTime() / 1000) * 1000
      const month = item.month
      // 月份转换成毫秒
      const endTime2 = endTime + month * 30 * 24 * 60 * 60 * 1000
      this.vipEndTime = formatDate(endTime2, 'yyyy-MM-dd hh:mm:ss')

      // 判断这个月是不是最后一个月
      if (item.month === this.selectCombo[this.selectCombo.length - 1].month) {
        const el = document.querySelector('.vip_select_warp')
        // 横向滚动到最后一个
        this.$nextTick(() => {
          el.scrollLeft = 1000
        })
      }
      this.orderInfoLoading = true

      if (this.version == 'SVIP' || this.version == 'VIP') {
        this.subQuantityNumber = 0
      } else {
        if (this.subQuantityNumber == 0) {
          this.subQuantityNumber = 6
        }
      }

      // 预下单
      let params = {}
      params.id = item.id
      params.sub_quantity = this.subQuantityNumber
      params.buy = 0
      this.getUserPackageBuy(params)
    },
    // 预下单
    getUserPackageBuy(params) {
      http.reqUserPackageBuy({ package_id: params.id, sub_quantity: params.sub_quantity, buy: params.buy }).then(res => {
        if (res.code === 0) {
          this.orderInfo = res.data
        } else {
          this.orderInfoLoading = false
          this.$message1(res.msg, 'error')
        }
      })
        .finally(() => {
          this.orderInfoLoading = false
        })
    },

    getVipCombo() {
      this.combo = {
        VIP: [],
        SVIP: [],
        EVIP: []
      }
      this.getPayList({package_id:4}).then((res) => {
        console.log(res,'pay列表',this.grade)
        this.combo.VIP = res.data[0]
        this.combo.SVIP = res.data[1]
        this.combo.EVIP = res.data[2]
        if (this.grade === 'EVIP' || this.$store.state.vipClick === 'EVIP' || this.$store.state.vip === 'EVIP') {
          this.version = 'EVIP'
        } else if (this.grade === 'SVIP' || this.$store.state.vipClick === 'SVIP' || this.$store.state.vip === 'SVIP') {
          this.version = 'SVIP'
        } else if (this.grade === 'VIP' || this.$store.state.vipClick === 'VIP' || this.$store.state.vip === 'VIP') {
          this.version = 'VIP'
        } else {
          this.version = 'VIP'
        }
        // 升级默认选中旗舰版
        if (this.grade === 'FREE' && this.$store.state.vipClick === 'VIP') {
          this.version = 'SVIP'
        }
        console.log(this.version)
        this.lostVipHunder()

        this.subQuantityMapPrice = this.combo.EVIP[0].sub_quantity_map_price
      })
    },
    lostVipHunder() {
      const vipMap = ['VIP', 'SVIP', 'EVIP']
      if (!this.combo[this.version] && this.version && vipMap.includes(this.version)) {
        this.version = vipMap[vipMap.indexOf(this.version) + 1]
        if (!this.version) {
          this.version = ''
        } else {
          this.lostVipHunder()
        }
      }
    },
    lookNosample(isPage) {
      if (isPage) {
        this.$emit('lookNosample', true)
        return
      }
      if (!this.isDetail) return
      let openUrl = ''
      const url = location.href
      let type = ''
      if (this.$store.state.videoDialog) {
        type = 'Video'
      } else {
        if (url.includes('/person/detail/')) {
          openUrl = '/person/detail/'
          type = 'User'
        } else if (url.includes('/keyWordDetail/detail')) {
          openUrl = '/keyWordDetail/detail?'
          type = 'KeyWord'
        }
      }
      localStorage.setItem('isDomeOk', true)
      if (this.$store.state.videoDialog) {
        http.postExampleData().then((res) => {
          if (res.video_id) {
            this.$store.state.videoDialog = false
            setTimeout(() => {
              this.$store.state.videoDialogId = res.video_id
              this.$store.state.videoDialog = true
            }, 200)
          } else {
            this.$message.error('暂无示例')
          }
        })
      } else {
        const tempPage = window.open('', '_blank')
        http.postExampleData().then((res) => {
          if (type === 'User') {
            if (res.user_id) {
              const routerData = this.$router.resolve({
                path: openUrl + res.user_id + '?type=example'
              })
              tempPage.location = routerData.href
            } else {
              this.$message.error('暂无示例')
            }
          } else if (type === 'KeyWord') {
            if (res.keyword) {
              const routerData = this.$router.resolve({
                path: openUrl + 'keyword=' + res.keyword + '&type=example'
              })
              tempPage.location = routerData.href
            } else {
              this.$message.error('暂无示例')
            }
          }
        })
      }
    },


    reqUserPackagePayBuyList() {


      http.reqUserPackagePayBuyList().then(res => {
        this.payUserList = res.data.data
        if (this.payUserList.length > 0) {
          // 处理手机号
          this.payUserList.forEach((item) => {
            item.member.mobile = item.member.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
          })
        }
        this.$nextTick(() => {
          try {
            this.commentSwiper = new Swiper('.comment_box', {
              autoplay: {
                delay: 2000
              },
              direction: 'vertical',
              loop: true, // 循环模式选项
              slidesPerView: 'auto',
              observer: true,
              observeParents: true,
              notNextTick: true,
              grabCursor: true
            })
          } catch (e) {
            console.log(e)
          }
        })
      });


      // reqUserPackagePayBuyList().then((res) => {
      //   this.payUserList = res.data.data
      //   if (this.payUserList.length > 0) {
      //     // 处理手机号
      //     this.payUserList.forEach((item) => {
      //       item.member.mobile = item.member.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
      //     })
      //   }
      //   this.$nextTick(() => {
      //     try {
      //       this.commentSwiper = new Swiper('.comment_box', {
      //         autoplay: {
      //           delay: 2000
      //         },
      //         direction: 'vertical',
      //         loop: true, // 循环模式选项
      //         slidesPerView: 'auto',
      //         observer: true,
      //         observeParents: true,
      //         notNextTick: true,
      //         grabCursor: true
      //       })
      //     } catch (e) {
      //       console.log(e)
      //     }
      //   })
      // })
    },
    windowsBlur() {
      const { hidden } = document
      this.reqResult = !hidden
    },
    setDetail() {
      const url = location.href
      if (url.includes('/person/detail/') || url.includes('/keyWordDetail/detail') || this.$store.state.videoDialog) {
        this.isDetailPage = false
      } else {
        this.isDetailPage = true
      }
    },
    openFirend(link, nofollow, local) {
      if (!nofollow) {
        var arg = '\u003cscript\u003elocation.replace("' + link + '")\u003c/script\u003e'
        window.open('javascript:window.name;', arg)
      } else if (local) {
        window.open(location.origin + link)
      } else {
        window.open(link)
      }
    },
    goToPay() {
      const id = this.selectMonth.id
      http.reqUserPackageBuy({ package_id: id, sub_quantity: this.subQuantityNumber, buy: 1 }).then((res) => {
        // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
        // const divForm = document.getElementsByTagName('divform')
        // if (divForm.length) {
        //   document.body.removeChild(divForm[0])
        // }
        // const div = document.createElement('divform')
        // div.innerHTML = res // data就是接口返回的form 表单字符串
        // document.body.appendChild(div)
        // document.forms[0].submit()
        if (res.code === 0) {
          window.location.href = res.data
        } else {
          this.$message1(res.msg, 'error')
        }
      })
    },
    // 选择团队人数
    changeSubQuantity(index) {
      this.subQuantityNumber = index
      // 预下单
      let params = {}
      params.id = this.selectMonth.id
      params.sub_quantity = index
      params.buy = 0
      this.getUserPackageBuy(params)
    },
    // 打开会员卡兑换窗口
    openMemberCardExchange() {
      this.showMemberCardExchange = true
    },
    // 关闭会员卡兑换窗口
    closeMemberCardExchangeDialog() {
      this.showMemberCardExchange = false
    },
  }
}
</script>

<style lang="scss" scoped>
.dialog_vip_user_info {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.childTipsBox {
  display: flex;
  flex-direction: column;
}

.childTips {
  margin: 0 auto;
  padding: 0 5px;
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 330px;
  height: 57px;
  border: 1px solid #8c550c;
  border-radius: 5px;
  text-align: center;

  span {
    color: #8c550c;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
  }
}

/deep/ .el-dialog {
  overflow-y: scroll;
}

/deep/.el-dialog--center .el-dialog__body {
  padding: 0;
}

.vip_select {
  background-color: #ffffff;
  border-radius: 8px;
  text-align: center;
  position: relative;
  width: 100%;

  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: content-box;

  

  .vip_box_top {
    display: flex;
    height: 79px;
  }

  .vip_box_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 18px;
    background: linear-gradient(-87deg, #ff671d 52%, #ff7b06 99%);
    border-radius: 0px 0px 6px 6px;
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #ffffff;
  }

  .vip_select_time {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    border-radius: 7px 0 0 7px;
    background: linear-gradient(313deg, #fff6d9 0%, #fff9ef 100%);

    &::after {
      content: '';
      width: 24px;
      height: 19px;
      position: absolute;
      bottom: 13px;
      right: 0;
      background-size: 100%;
      background-image: url('../../../assets/fastposter/vip/payBox/v1.png');
    }

    span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 17px;
      height: 100%;
      font-size: 14px;
      line-height: 14px;
    }
  }

  .vip_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 172px !important;
  }
}

.vip_selected {
  margin-top: -2px;
  position: relative;
  border: 2px solid #ffd38c;

  // box-sizing: border-box;
  // transform: scale(1.02);
  .vip_select_time {
    border-radius: 7px 0 0 0px;
    background: linear-gradient(90deg, #ffd478 0%, #feb95d 100%);

    &::after {
      content: '';
      width: 24px;
      height: 19px;
      position: absolute;
      bottom: 13px;
      right: 0;
      background-size: 100%;
      background-image: url('../../../assets/fastposter/vip/payBox/v2.png');
    }
  }

  .vip_selected_icon_box {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
    overflow: hidden;
  }

  .vip_selected_icon {
    position: absolute;
    right: -17px;
    bottom: -17px;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-left-color: #ffd38c;
    transform: rotate(45deg);

    i {
      position: absolute;
      left: -15px;
      top: -7px;
      transform: rotate(-50deg);
      color: #fff;
      font-size: 12px;
    }
  }

  .vip_select_tag {
    color: #fff;
  height: 20px;
  line-height: 20px;
  padding: 0px 10px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background-image: -webkit-linear-gradient(90deg, #ff2d64 0%, #ff4b7d 100%);
  display: inline-block;
  position: absolute;
  right: -4px;
  top: -5px;

    left: -2px;

    font-size: 12px;
 
  }
}

.limited_time {
  .vip_select_time {
    border-radius: 7px 0 0 7px !important;

    font-size: 14px;
  color: #7c571f;
  font-family: PingFang SC, PingFang SC-Regular;
  display: inline-block;
  }
}

.vip_selected_disabled {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

.dialog_vip_pay_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 77px;
  min-width: 330px;

  .price_tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 43px;
    border-radius: 5px;
    border: 1px solid #8c550c;
    font-size: 12px;
    color: #8c550c;
    line-height: 17px;
  }

  .price_txt {
    margin-top: 12px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #8c550c;
    line-height: 20px;
  }

  .price {
    font-size: 36px;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #8c550c;
    line-height: 36px;
  }

  .original_price {
    margin-top: 8px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8c550c;
    line-height: 17px;
    text-decoration: line-through;
  }

  .price_time {
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #aaaaaa;
    line-height: 17px;
  }

  .price_btn {
    cursor: pointer;
    margin-top: 3px;
    width: 134px;
    height: 32px;
    background: linear-gradient(140deg, #f6ce8c 0%, #dda02b 100%);
    border-radius: 16px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

.change_price {
  position: absolute;
  right: -15px;
  top: -10px;
  background: #ea4071;
  color: #fff;
  font-size: 12px;
  padding: 5px;
  box-shadow: #ea4071;
  border-radius: 5px;
  line-height: 1;
  text-align: left;

  &::before {
    content: '.';
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 6px solid #ea4071;
    position: absolute;
    left: -2px;
    bottom: 0;
    color: #ea4071;
    line-height: 0.1;
  }
}

.deduction {
  display: flex;
  align-items: center;
  margin-top: 6px;
  text-align: left;
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Regular;
  color: #444444;
}

.coupon {
  display: flex;
  align-items: center;
  width: 227px;
  margin: 0 !important;
  position: relative;
  padding-top: 10px;
  font-family: PingFang SC, PingFang SC-Regular;
}

#main {
  width: 180px;
  height: 25px;
  z-index: 5000;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
}

#main i {
  margin-top: 16px;
  margin-right: 5px;
  background: #f6f8f8;
  color: #dcdfe6;
  font-size: 14px;
}

#content {
  display: flex;
  justify-content: space-between;
  padding: 0 30px 0 10px;
  width: 178px;
  height: 23px;
  line-height: 23px;
  padding-left: 9px;
  background: #f6f8f8;
  font-size: 12px;
  color: #999999;
  cursor: pointer;
  border-radius: 5px;

  span {
    font-size: 12px;
  }
}

#selectImg {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background: #fff;
  color: #333;
  font-size: 16px;
}

#selectItem {
  margin-top: 1px;
  // display: none;
  // border: 1px solid #eee;
  background: #f6f8f8;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #53596f;
  position: absolute;
  z-index: 1000;
  width: 178px;
}

#selectItem ul {
  width: 178px;
  height: 100%;
  max-height: 135px;
  list-style: none;
  overflow-y: auto;
  margin-top: 10px;

  &::-webkit-scrollbar-thumb {
    background: #d8d8d8;
  }
}

#selectItem ul li {
  text-align: left;
  padding: 3px 10px;
  cursor: pointer;
  color: #53596f;
}

#selectItem ul li:hover {
  background-color: rgba(0, 0, 1, 0.1);
}

.cou-div {
  display: flex;
  justify-content: space-between;

  .cou-name {
    font-weight: bold;
    font-size: 12px;
  }

  .cou-price {
    color: #c79954;
    font-size: 12px;
  }
}

.save-price {
  font-size: 12px;
  min-width: 250px;
  text-align: center;

  span {
    color: #f94951;
  }
}

.vip_bottom_tag {
  padding: 0 6px;
  position: absolute;
  right: 0;
  bottom: -26px;
  height: 18px;
  background: #ffa249;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  line-height: 18px;
  font-family: PingFang SC, PingFang SC-Regular;

  &::after {
    content: '';
    border-left: 6.5px solid transparent;
    border-right: 6.5px solid transparent;
    border-bottom: 6px solid #ffa249;
    position: absolute;
    top: -6px;
    right: 20px;
  }
}

.vip_bottom_tag2 {
  &::after {
    content: '';
    border-left: 6.5px solid transparent;
    border-right: 6.5px solid transparent;
    border-bottom: 6px solid #ab7dff;
    position: absolute;
    top: -6px;
    right: 20px;
  }
}

.vip_card {
  display: flex;
  width: 100%;
  height: 60px;
  border-radius: 6px;
  line-height: 60px;
  padding: 0px 25px;
  justify-content: center;
  align-items: center;

  flex-direction: column;
  position: relative;
  height: 44px;
  line-height: 1;
  padding: 0;
  color: #97999d;
  overflow: hidden;
  border-radius: 16px 16px 0px 0px;
  background-image: url('../../../assets/fastposter/vip/payBox/vip_pro_base_no.png');
  background-size: 100%;

  
  
  .des {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    color: #bebfc3;
  }

  .vip_card p {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  color: #bebfc3;
  font-family: PingFang SC, PingFang SC-Bold;
}



  .vip_card_div {
    display: flex;
    align-items: flex-end;

    .vip_card_div_left {
      display: flex;
      align-items: center;
    }

    .ft_small {
      display: inline-block;
      margin-left: 4px;
      padding-bottom: 4px;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #bebfc3;
    }
  }

  .specialty {
    display: flex;
    align-items: center;

    div {
      color: #d9001b;
      background: #fff;
      padding: 4px;
      border-radius: 7px;
      border: 1px solid #d9001b;
      font-size: 12px;
      height: 23px;
      margin-left: 5px;
    }

    img {
      margin-left: 40px;
    }
  }
}

.vip_pro_select {
  &>span {
    color: #8c8c8c !important;
  }

  .ft_small {
    color: #af864a !important;
  }

  background-image: url('../../../assets/fastposter/vip/payBox/vip_pro_base.png') !important;
  background-size: cover;
}

.vip_pro_select p {
  color: #ffffff;
  font-weight: 700;
}

.vip_select_tag {
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Regular;
  color: #fff;
  height: 20px;
  line-height: 20px;
  padding: 4px 8px;
  border-radius: 8px 0px 8px 0px;
  background: linear-gradient(#ffa349 0%, #ff414e 100%);
  display: flex;
  align-items: center;
  position: absolute;
  left: 0px;
  top: -11px;
  z-index: 5;
  right: auto;
}

.vip_select_tag2 {
  display: flex;
  justify-content: center;
  width: 80px;
  z-index: 10;
  background-image: linear-gradient(261deg, #ff2153 0%, #ff41c4 100%);
}

.month3 {
  top: -13px;
}

.new_year_tag {
  width: 100%;
  height: 21px;
  background: linear-gradient(76deg, #fbabe7 16%, #ab7dff 78%);
  font-size: 14px;
  color: #ffffff;
  font-family: PingFang SC, PingFang SC-Semibold;
  z-index: 3;

  p {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .big {
    font-size: 14px;
    font-weight: 600;
  }

  .left_icon,
  .right_icon {
    width: 19px;
    height: 14px;
  }

  .left_icon {
    margin-right: 5px;
  }

  .right_icon {
    margin-left: 5px;
  }
}

.lookNosample {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 115px;
  height: 25px;
  border: 1px solid #dddddd;
  border-radius: 14px;
  font-size: 12px;
  color: #aaaaaa;
  cursor: pointer;
  font-family: PingFang SC, PingFang SC-Regular;

  i {
    margin: 0;
    top: 0;
  }
}

.vip_card_icon {

  width: 18px;
  height: 16px;
  position: relative;

  height: auto;
  margin-right: 5px;
}

.vip_bottom {
  padding: 0 17px;
  background: #f5f6fa;

  .vip_box {
    // margin-top: 6px;
    width: 100%;
    display: grid;
    // 每行3个
    grid-template-columns: repeat(3, 1fr);

    // grid-gap: 15px;
    .vip_select_item {}

    .stance {
      height: 88px;
    }
  }

  .vip_box4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .vip_box5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .vip_box6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .dialog_vip_pay {
    display: flex;
    background: #fff;
    border-radius: 8px;
    flex-direction: column;

    .dialog_vip_pay_bottom {
      margin-top: 13px;
      padding: 0 12px 8px 25px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .expire_time {
        width: 180px;
        display: block;
        text-align: left;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        color: #aaaaaa;
        height: 17px;
        line-height: 17px;
      }

      .pay_mode {
        margin-left: -32px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        color: #999999;

        .wechat-pay,
        .alipay {
          display: flex;
          align-items: center;
        }

        .wechat-pay {
          margin-right: 12px;
          color: #27c545;
        }

        .alipay {
          margin-left: 12px;
          color: #01a7ff;
        }
      }
    }
  }

  .dialog_vip_pay_top {
    padding-left: 28px;
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    position: relative;

    .dialog_vip_pay_top_left {
      .weixin {
        margin-right: 3px;
        width: 19px;
        height: 16px;
      }
    }

    .card_exchange_btn {
      cursor: pointer;
      width: 100px;
      height: 32px;
      background: linear-gradient(140deg, #f6ce8c 0%, #dda02b 100%);
      border-radius: 16px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      position: absolute;
      top: 0;
      right: 18px;
      line-height: 32px;
      text-align: center;
    }
  }

  // 选择人数
  .sub_quantity {
    width: 100%;
    padding: 14px 0 10px 0;

    .sub_title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .sub_quantity_list {
      width: 100%;
      height: 36px;
      display: flex;

      .item {
        width: 150px;
        background-color: #01a7ff;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px solid #666;
        border-radius: 18px;
        margin-right: 36px;
        background-color: #fff;
        cursor: pointer;
      }

      .item.on {
        border: 2px solid #ffd38c;
        color: #ffd38c;
        font-weight: bold;
      }
    }
  }

}

.vip_select_warp {
  margin: 25px 0px;

  margin: 0;
  padding-top: 20px;
  width: 100%;
  height: 115px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  

  // 显示横向滚动条
  &::-webkit-scrollbar {
    height: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

.dialog_vip_warp {
  width: 100%;
  padding: 5px 0px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);

  display: flex;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  border-radius: 16px;

  

  .vip_left_info_box {
    flex-shrink: 0;
    position: relative;
    width: 164px;
    height: 451px;
    background-color: #32323e;
    border-radius: 0 0 12px 12px;

    .vip_left_info {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: 10;
      border-radius: 10px;
      padding: 14px 0 0 0;

      .vip_tq_info {
        margin: 0 auto;
        margin-bottom: 20px;
        padding: 0 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 8px;
        width: 143px;
        height: 38px;
        background: #fbfbfb;
        border: 1px solid rgba(0, 0, 0, 0.11);
        border-radius: 5px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333;
      }

      .bottom_txt {
        position: absolute;
        left: 7px;
        bottom: 47px;
        
      }

      .to_pay {
        cursor: pointer;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 93px;
        height: 24px;
        border: 1px solid #999999;
        border-radius: 13px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #666666;

        .icon-next {
          font-size: 12px;
          color: #999;
          transform: scale(0.7) translateY(2px);
        }
      }

      .no_back {
        margin-top: 8px;
        height: 17px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #bbbbbb;
        line-height: 17px;
        text-align: center;
      }

      .vip_info {
        .vip_info_title {
          margin-bottom: 36px;
          display: flex;
          align-items: center;
          justify-content: center;

          .img {
            flex-shrink: 0;
            width: 18px;
            height: 16px;
          }

          .title {
            margin-left: 7px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #d88d62;
          }
        }

        .no_has_box {
          margin-bottom: 12px;
        }

        .no_has_box,
        .has_box {
          
          padding-left: 9px;
          display: flex;
          align-items: flex-start;

          .iconfont {
            font-size: 12px;
            line-height: 17px;
            
          }

          .icon-shibai {
            padding-right: 7px;
            color: #ef1111;
          }

          .icon-chenggong1 {
            padding-right: 7px;
            color: #4cdc4c;
          }

          .right_list {
            padding: 0px;
            
            .item {
              
              width: 146px;
              height: 17px;
              font-size: 12px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              color: #888888;
              line-height: 17px;
              &:not(:last-child) {
                margin-bottom: 8px;
              }
            }
          }
        }
      }
    }
  }

  .vip_right {
    width: calc(100% - 164px);
  }
}

.tabs_vip {
  position: relative;

  .tabs_vip_left,
  .tabs_vip_right {
    top: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-color: #1a2522;
  }

  .tabs_vip_left {
    left: 0;
  }

  .tabs_vip_right {
    right: 0;
    background-color: #1a2522;
  }

  .el-col-8 {
    padding: 0 !important;
  }

  .vip_card_p {
    position: absolute;
    z-index: 2;
  }
}

.vip_pro_hide {
  display: none;

  .vip_card {
    cursor: default;
  }
}

.tabs_vip2 {
  background-color: rgb(43, 43, 54);
  justify-content: flex-start !important;

  .tabs_vip_left,
  .tabs_vip_right {
    background-color: rgb(43, 43, 54);
  }
}

/deep/ .swiper-slide {
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.comment_box {
  overflow: hidden;
}

.totop_list {
  height: 120px;
  overflow: hidden;

  li {
    opacity: 1;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #b2b6c7;
    line-height: 24px;
    width: 209px;
    height: 24px;
    opacity: 1;
    background: #f5f6fa;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 6px;
  }
}

.txt_line {
  text-decoration: line-through;
}

.vip_select_time {
  font-size: 14px;
  color: #7c571f;
  font-family: PingFang SC, PingFang SC-Regular;
  display: inline-block;
}

.vip_select_price {
  font-size: 12px;
  color: #dfb679;
  font-family: PingFang SC, PingFang SC-Heavy;
}
.vip_select_price_one {
  color: #bc8f4a;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Heavy;
  font-weight: bold;
}
.vip_select_price_one strong {
  font-size: 24px;
}
.flex_c_c {
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrcode_bg {
  display: inline-block;
  position: relative;
  height: 160px;
  width: 160px;
  margin: 25px 32px 0px;
  text-align: center;
  // background: url(../assets/img/qrcode_bg.png) center top no-repeat;
  background-size: cover;
  padding-top: 160px;
}
.qrcode_img {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  height: 140px;
  width: 140px;
  opacity: 0.88;
}

.qrcode_line {
  pointer-events: none;
  position: absolute;
  z-index: 101;
  top: 0px;
  left: -20px;
  height: 2px;
  width: 200px;
  // background: url(../assets/img/qrcode_line.png) no-repeat;
  background-size: 100%;
  animation: QRcode 1.2s infinite alternate;
  -webkit-animation: QRcode 1.2s infinite alternate;
}

.qrcode_bg span {
  display: inline-block;
  font-size: 14px;
  color: #8c8c8c;
  margin: 10px auto;
}
li,
ul {
  list-style: none;
}

i {
  font-style: normal;
}
</style>
